<template>
  <div class="category-page">
    <div class="category-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/tools' }">工具</el-breadcrumb-item>
        <el-breadcrumb-item>{{ categoryInfo.title }}</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="category-title">
        <div class="category-icon">
          <el-icon :size="40">
            <component :is="categoryInfo.icon" />
          </el-icon>
        </div>
        <div>
          <h1>{{ categoryInfo.title }}</h1>
          <p>{{ categoryInfo.description }}</p>
        </div>
      </div>
    </div>

    <!-- 搜索框 -->
    <div class="search-section">
      <el-input v-model="searchQuery" placeholder="在此分类中搜索工具..." size="large" class="search-input"
        @input="handleSearch">
        <template #prefix>
          <el-icon>
            <Search />
          </el-icon>
        </template>
      </el-input>
    </div>

    <!-- 工具列表 -->
    <div class="tools-container">
      <div v-if="filteredTools.length === 0" class="empty-state">
        <el-empty description="没有找到相关工具" />
      </div>

      <div v-else class="tools-grid">
        <div v-for="tool in filteredTools" :key="tool.id" class="tool-card" @click="goToTool(tool)">
          <div class="tool-header">
            <div class="tool-icon">
              <el-icon :size="24">
                <component :is="tool.icon" />
              </el-icon>
            </div>
            <div class="tool-badge">
              <el-tag size="small" type="info">热门</el-tag>
            </div>
          </div>

          <div class="tool-content">
            <h3>{{ tool.name }}</h3>
            <p>{{ tool.description }}</p>
          </div>

          <div class="tool-footer">
            <div class="tool-stats">
              <span class="usage-count">
                <el-icon>
                  <View />
                </el-icon>
                {{ tool.usage.toLocaleString() }} 次使用
              </span>
            </div>
            <el-button type="primary" size="small">
              立即使用
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 相关分类推荐 -->
    <div v-if="relatedCategories.length > 0" class="related-categories">
      <h3>相关分类</h3>
      <div class="categories-list">
        <div v-for="category in relatedCategories" :key="category.name" class="category-item"
          @click="goToCategory(category.name)">
          <div class="category-icon">
            <el-icon :size="20">
              <component :is="category.icon" />
            </el-icon>
          </div>
          <span>{{ category.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Search,
  View,
  Document,
  Picture,
  Operation,
  Link,
  Edit,
  Timer,
  Download,
  Lock,
  Unlock,
  DocumentCopy,
  Picture as Image,
  Sort
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

const searchQuery = ref('')
const categoryName = computed(() => route.params.category)

// 分类信息映射
const categoryMap = {
  text: {
    title: '文本工具',
    description: '文本处理、编码解码、格式化等实用工具',
    icon: 'Document'
  },
  image: {
    title: '图片工具',
    description: '图片处理、格式转换、压缩等图片相关工具',
    icon: 'Picture'
  },
  calculator: {
    title: '计算工具',
    description: '各种计算器、单位转换等计算工具',
    icon: 'Operation'
  },
  time: {
    title: '时间工具',
    description: '日期计算、节假日查询等时间工具',
    icon: 'Timer'
  },
  converter: {
    title: '换算工具',
    description: '各种单位换算、进制转换等换算工具',
    icon: 'Sort'
  },
  network: {
    title: '网络工具',
    description: '网络检测、IP查询等网络相关工具',
    icon: 'Link'
  },
  developer: {
    title: '开发工具',
    description: '代码格式化、加密解密等开发辅助工具',
    icon: 'Edit'
  },
  other: {
    title: '其他工具',
    description: '时间工具、文件处理等其他实用工具',
    icon: 'Timer'
  }
}

const categoryInfo = computed(() => {
  return categoryMap[categoryName.value] || {
    title: '未知分类',
    description: '该分类不存在',
    icon: 'Document'
  }
})

// 相关分类推荐
const relatedCategories = computed(() => {
  const allCategories = Object.keys(categoryMap)
  const currentIndex = allCategories.indexOf(categoryName.value)
  const related = []

  // 推荐前后两个分类
  for (let i = 0; i < allCategories.length; i++) {
    if (i !== currentIndex && Math.abs(i - currentIndex) <= 2) {
      const cat = allCategories[i]
      related.push({
        name: cat,
        title: categoryMap[cat].title,
        icon: categoryMap[cat].icon
      })
    }
  }

  return related.slice(0, 3)
})

// 工具数据（这里应该根据分类动态加载）
const tools = ref([
  // 文本工具
  {
    id: 1,
    name: 'Base64编码解码',
    description: 'Base64编码和解码工具，支持文本和文件处理',
    category: 'text',
    icon: 'DocumentCopy',
    usage: 12580
  },
  {
    id: 2,
    name: 'URL编码解码',
    description: 'URL编码和解码工具，处理特殊字符',
    category: 'text',
    icon: 'Link',
    usage: 8765
  },
  {
    id: 3,
    name: 'MD5加密工具',
    description: '快速进行MD5哈希加密',
    category: 'text',
    icon: 'Lock',
    usage: 6543
  },
  {
    id: 4,
    name: 'SHA1加密工具',
    description: '快速进行SHA1哈希加密',
    category: 'text',
    icon: 'Lock',
    usage: 5432
  },
  {
    id: 5,
    name: 'AES加密解密',
    description: 'AES对称加密和解密工具',
    category: 'text',
    icon: 'Unlock',
    usage: 4321
  },
  {
    id: 6,
    name: '摩斯电码转换',
    description: '摩斯电码编码和解码工具',
    category: 'text',
    icon: 'Document',
    usage: 3210
  },
  {
    id: 7,
    name: 'ASCII编码转换',
    description: 'ASCII码与字符转换工具',
    category: 'text',
    icon: 'Edit',
    usage: 3210
  },
  {
    id: 8,
    name: '全角半角转换',
    description: '全角半角字符转换工具',
    category: 'text',
    icon: 'Edit',
    usage: 2109
  },
  {
    id: 9,
    name: '英文字母大小写转换',
    description: '快速转换英文字母的大小写格式',
    category: 'text',
    icon: 'Edit',
    usage: 8765
  },
  {
    id: 10,
    name: '文本对比',
    description: '对比两个文本的差异，高亮显示不同之处',
    category: 'text',
    icon: 'Document',
    usage: 4321
  },
  {
    id: 11,
    name: '正则表达式测试',
    description: '测试和调试正则表达式，实时预览匹配结果',
    category: 'text',
    icon: 'Edit',
    usage: 7890
  },
  {
    id: 12,
    name: 'JSON格式化',
    description: '格式化、验证和美化JSON数据',
    category: 'text',
    icon: 'DocumentCopy',
    usage: 15670
  },
  {
    id: 13,
    name: 'XML格式化',
    description: '格式化XML数据，提高可读性',
    category: 'text',
    icon: 'Document',
    usage: 3456
  },
  {
    id: 14,
    name: 'CSV转JSON',
    description: '将CSV文件转换为JSON格式',
    category: 'text',
    icon: 'Sort',
    usage: 5678
  },

  // 开发工具
  {
    id: 20,
    name: '密码生成器',
    description: '生成安全的随机密码',
    category: 'developer',
    icon: 'Lock',
    usage: 8765
  },
  {
    id: 21,
    name: 'GUID生成器',
    description: '生成全局唯一标识符',
    category: 'developer',
    icon: 'DocumentCopy',
    usage: 4321
  },
  {
    id: 22,
    name: '颜色选择器',
    description: '在线颜色选择和格式转换',
    category: 'developer',
    icon: 'Picture',
    usage: 7654
  },
  {
    id: 23,
    name: '代码格式化',
    description: '格式化各种编程语言代码',
    category: 'developer',
    icon: 'DocumentCopy',
    usage: 5432
  },
  {
    id: 24,
    name: '时间戳转换',
    description: 'Unix时间戳与日期时间转换',
    category: 'developer',
    icon: 'Timer',
    usage: 6543
  },
  {
    id: 25,
    name: 'API测试工具',
    description: '在线API接口测试',
    category: 'developer',
    icon: 'Link',
    usage: 3210
  },
  {
    id: 26,
    name: 'SQL格式化',
    description: '格式化SQL语句',
    category: 'developer',
    icon: 'DocumentCopy',
    usage: 5432
  },

  // 图片工具
  {
    id: 30,
    name: '二维码生成器',
    description: '生成各种样式的二维码',
    category: 'image',
    icon: 'Picture',
    usage: 9876
  },
  {
    id: 31,
    name: '图片压缩',
    description: '快速压缩图片文件，减小文件大小',
    category: 'image',
    icon: 'Download',
    usage: 7654
  },
  {
    id: 32,
    name: '图片格式转换',
    description: '快速转换图片格式，支持多种输出格式',
    category: 'image',
    icon: 'Image',
    usage: 5432
  },
  {
    id: 33,
    name: '图片尺寸调整',
    description: '快速调整图片尺寸和比例',
    category: 'image',
    icon: 'Picture',
    usage: 4321
  },
  {
    id: 34,
    name: '图片水印',
    description: '为图片添加文字或图片水印',
    category: 'image',
    icon: 'Edit',
    usage: 3210
  },

  // 计算工具
  {
    id: 40,
    name: '科学计算器',
    description: '功能强大的科学计算器',
    category: 'calculator',
    icon: 'Operation',
    usage: 8765
  },
  {
    id: 41,
    name: '单位转换器',
    description: '长度、重量、温度等单位转换',
    category: 'calculator',
    icon: 'Sort',
    usage: 6543
  },
  {
    id: 42,
    name: '日期计算器',
    description: '计算日期差值和日期运算',
    category: 'calculator',
    icon: 'Timer',
    usage: 4321
  },
  {
    id: 43,
    name: '百分比计算器',
    description: '各种百分比计算',
    category: 'calculator',
    icon: 'Operation',
    usage: 3210
  },
  {
    id: 44,
    name: '贷款计算器',
    description: '房贷、车贷等贷款计算',
    category: 'calculator',
    icon: 'Operation',
    usage: 5432
  },
  {
    id: 45,
    name: '汇率转换器',
    description: '实时汇率转换',
    category: 'calculator',
    icon: 'Sort',
    usage: 7890
  },
  {
    id: 46,
    name: '工作日计算器',
    description: '计算两个日期之间的工作日天数',
    category: 'time',
    icon: 'Timer',
    usage: 4321
  },
  {
    id: 47,
    name: '日期时间计算器',
    description: '计算时间差并支持倒计时',
    category: 'time',
    icon: 'Timer',
    usage: 5234
  },
  {
    id: 48,
    name: '农历公历转换器',
    description: '农历与公历互转，查看干支生肖',
    category: 'time',
    icon: 'Timer',
    usage: 4120
  },
  {
    id: 49,
    name: '世界时间转换器',
    description: '多个城市时区之间转换时间',
    category: 'time',
    icon: 'Timer',
    usage: 3650
  },
  {
    id: 50,
    name: '英文日期格式转换',
    description: '在多种英文日期格式之间转换',
    category: 'time',
    icon: 'Timer',
    usage: 2980
  },
  {
    id: 51,
    name: '时间戳批量转换',
    description: '批量转换时间戳与日期格式',
    category: 'time',
    icon: 'Timer',
    usage: 3870
  },

  // 换算工具
  {
    id: 52,
    name: '字节单位换算器',
    description: '比特、字节、千字节等单位转换',
    category: 'converter',
    icon: 'DocumentCopy',
    usage: 5432
  },

  // 网络工具
  {
    id: 50,
    name: 'IP地址查询',
    description: '查询IP地址的地理位置信息',
    category: 'network',
    icon: 'Link',
    usage: 8765
  },
  {
    id: 51,
    name: '网站速度测试',
    description: '测试网站加载速度',
    category: 'network',
    icon: 'Timer',
    usage: 6543
  },
  {
    id: 52,
    name: '端口扫描器',
    description: '扫描指定IP的开放端口',
    category: 'network',
    icon: 'Link',
    usage: 4321
  },
  {
    id: 53,
    name: 'Whois查询',
    description: '查询域名的注册信息',
    category: 'network',
    icon: 'Search',
    usage: 3210
  }
])

const filteredTools = computed(() => {
  let result = tools.value.filter(tool => tool.category === categoryName.value)

  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(tool =>
      tool.name.toLowerCase().includes(query) ||
      tool.description.toLowerCase().includes(query)
    )
  }

  return result
})

const handleSearch = () => {
  // 搜索逻辑
}

const goToTool = (tool) => {
  console.log('跳转到工具:', tool.name)
  // 这里可以根据具体工具跳转到对应页面
  const toolRoutes = {
    'Base64编码解码': '/tool/base64',
    'URL编码解码': '/tool/url',
    'MD5加密工具': '/tool/md5',
    'SHA1加密工具': '/tool/sha1',
    'AES加密解密': '/tool/aes',
    '摩斯电码转换': '/tool/morse',
    'ASCII编码转换': '/tool/ascii',
    '全角半角转换': '/tool/fullwidth',
    '英文字母大小写转换': '/tool/text-case',
    'JSON格式化': '/tool/json-formatter',
    '二维码生成器': '/tool/qr-generator',
    '颜色选择器': '/tool/color-picker',
    '密码生成器': '/tool/password-generator',
    'GUID生成器': '/tool/guid',
    '图片压缩': '/tool/image-compress',
    '图片格式转换': '/tool/image-convert',
    '图片尺寸调整': '/tool/image-resize',
    '图片水印': '/tool/image-watermark',
    '科学计算器': '/tool/scientific-calculator',
    '单位转换器': '/tool/unit-converter',
    '日期计算器': '/tool/date-calculator',
    '百分比计算器': '/tool/percentage-calculator',
    '贷款计算器': '/tool/loan-calculator',
    '汇率转换器': '/tool/exchange-rate-converter',
    '日期时间计算器': '/tool/date-time-calculator',
    '工作日计算器': '/tool/workday-calculator',
    '农历公历转换器': '/tool/lunar-converter',
    '世界时间转换器': '/tool/world-time-converter',
    '英文日期格式转换': '/tool/date-format-converter',
    '时间戳批量转换': '/tool/timestamp-batch-converter',
    '字节单位换算器': '/tool/byte-unit-converter',
    'IP地址查询': '/tool/ip-query',
    '网站速度测试': '/tool/website-speed-test',
    '端口扫描器': '/tool/port-scanner',
    'Whois查询': '/tool/whois-query',
    '代码格式化': '/tool/code-formatter',
    '时间戳转换': '/tool/timestamp-converter',
    'API测试工具': '/tool/api-testing',
    'SQL格式化': '/tool/sql-formatter',
    '文本对比': '/tool/text-diff',
    '正则表达式测试': '/tool/regex-tester',
    'XML格式化': '/tool/xml-formatter',
    'CSV转JSON': '/tool/csv-to-json'
  }

  const route = toolRoutes[tool.name]
  if (route) {
    console.log('跳转到工具页面:', route)
    router.push(route)
  } else {
    console.log('未找到工具路由:', tool.name)
    ElMessage.info('该工具功能正在开发中...')
  }
}

const goToCategory = (category) => {
  router.push(`/tools/${category}`)
}

onMounted(() => {
  // 根据分类加载对应的工具数据
  // 这里可以调用API获取数据
})
</script>

<style scoped>
.category-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.category-header {
  margin-bottom: 40px;
}

.category-title {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.category-icon {
  color: #667eea;
  background: #f0f4ff;
  padding: 16px;
  border-radius: 12px;
}

.category-title h1 {
  font-size: 2.5rem;
  color: #333;
  margin: 0 0 8px 0;
}

.category-title p {
  color: #666;
  font-size: 1.1rem;
  margin: 0;
}

.search-section {
  margin-bottom: 40px;
}

.search-input {
  max-width: 500px;
}

.tools-container {
  margin-bottom: 60px;
}

.empty-state {
  text-align: center;
  padding: 60px 0;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.tool-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid #f0f0f0;
}

.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.tool-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.tool-icon {
  color: #667eea;
  background: #f0f4ff;
  padding: 8px;
  border-radius: 8px;
}

.tool-badge {
  opacity: 0.8;
}

.tool-content {
  margin-bottom: 20px;
}

.tool-content h3 {
  font-size: 1.3rem;
  color: #333;
  margin-bottom: 8px;
  font-weight: 600;
}

.tool-content p {
  color: #666;
  line-height: 1.5;
  margin: 0;
}

.tool-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tool-stats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.usage-count {
  color: #999;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

.related-categories {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 30px;
  margin-top: 40px;
}

.related-categories h3 {
  color: #333;
  margin-bottom: 20px;
  font-size: 1.3rem;
}

.categories-list {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.category-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e9ecef;
}

.category-item:hover {
  background: #667eea;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.category-item .category-icon {
  color: #667eea;
}

.category-item:hover .category-icon {
  color: white;
}

@media (max-width: 768px) {
  .category-title {
    flex-direction: column;
    text-align: center;
  }

  .tools-grid {
    grid-template-columns: 1fr;
  }

  .tool-footer {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .categories-list {
    flex-direction: column;
  }
}
</style>
